<template>
  <ul class="typeList">
    <li
      v-for="(item,index) in typeList"
      :key="index"
      :class="typeIndex === item.type?'current':''"
      @click="$emit('clickType',item)"
    >
    {{item.lable}}
      <el-popover placement="top-start" trigger="click">
        <div class="date-wrap" v-if="item.type == 'year'">
          <el-date-picker v-model="value" type="year" placeholder="选择年" size="mini" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
        </div>
        <div class="date-wrap" v-else>
          <el-date-picker v-model="value" type="month" placeholder="选择年" size="mini" value-format="yyyy-MM-dd" @change="changeDate"></el-date-picker>
        </div>
        <i class="el-icon-arrow-right" slot="reference" @></i>
      </el-popover>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    typeIndex: {
      type: String
    },
    typeList: {
      type: Array,
      default: []
    }
  },
  data(){
    return {
      value:new Date()
    }
  },
  methods:{
    changeDate(date){
      this.$emit('changeDate',date)
    }
  }
};
</script>
<style lang="scss" scoped>
.typeList {
  position: absolute;
  top: 0;
  right: 0;
  list-style: none;
  z-index: 9;
  padding: 0;
  margin: 0;
  li {
    display: inline-block;
    font-size: 14px;
    color: #333333;
    margin: 0 5px;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    &.current {
      color: #ffffff;
      background: #409eff;
    }
  }
}
.date-wrap {
  width: 240px;
  text-align: center;
  p {
    display: inline-block;
    width: 60px;
    padding: 0 5px;
    text-align: center;
    cursor: pointer;
    &.present {
      color: #409eff;
    }
  }
}
</style>